<template> 
    <searchTopBar v-if="otherWayShow" :title="'搜索'" @topBarHeight="topBarHeightHandler"></searchTopBar>
    <searchTopBar v-else @topBarHeight="topBarHeightHandler" :rightTitle="'取消'" @closeSearch="closeSearch">
        <view class="input-view">
            <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
            <input confirm-type="search" class="nav-bar-input" type="text" placeholder="Chat号/手机号/邮箱"
            v-model="searchText"  :focus="!otherWayShow" />
        </view>
    </searchTopBar>
    <view class="page-container" :style="{ marginTop: topBarHeight + 'px' }">
        <view class="container" >
            <view class="search-container" v-if="otherWayShow">
                <uni-icons
                    type="search"
                    color="#b8b8b8"
                    size="24"
                    class="search-icon"
                />
                <input
                    v-model="searchText"
                    type="text"
                    class="search-input"
                    placeholder="Chat号/手机号/邮箱"
                    prefixIcon="search"
                    @input="inputHandler"
                    @focus="inputFocusHandler"
                ></input>
            </view>
            <!--其他方式-->
            <view class="other-way" v-if="otherWayShow">

            </view>
            <!-- 列表 -->
            <view class="list-container" v-if="searchText.length == 0">
                <view class="list-title">
                    <text class="title">可能认识的新朋友</text>
                    <view class="more">
                        <text>查看更多</text>
                        <uni-icons
                            type="right"
                            color="#333"
                            size="12"
                        />
                    </view>
                </view>
                <uni-list class="list" >
                    <uni-list-chat 
                    v-for="(item, index) in newFriendsList" 
                    :title="item.nickName" 
                    :avatar-circle="true"
                    :key="index"
                    :avatar="item.userAvatar? item.userAvatar : ''" 
                    :note="item.personalSignature? item.personalSignature : '暂无个性签名'" 
                    :showSwitch="true"
                    :clickable="true"
                    >
                        <view class="chat-custom-right">
                            <button type="default" size="mini" @tap="toggle('top', item)">
                                添加好友
                            </button>
                        </view>
                    </uni-list-chat>
                </uni-list>
            </view>
            <view v-else class="list-container">
                <navigator
                    :url="'/pages/index/show_search_friends?searchText=' + searchText"
                    open-type="navigate"
                    animation-type="pop-in"
                >
                    <view class="search-text">
                        <view class="search-text-title">查找“ <text class="search-text-text">{{searchText }}</text> ”相关的用户</view>
                        <uni-icons type="right" class="search-text-icon" size="30"></uni-icons>
                    </view>
                </navigator>
            </view>
            <!-- 普通弹窗 -->
            <uni-popup ref="popupRef" background-color="#fff">
                <view class="popup-content">
                    <view class="popup-top">
                        <image
                            :src="currentFriend.userAvatar? currentFriend.userAvatar : ''"
                            mode="scaleToFill"
                            class="popup-avatar"
                        />
                        <text>{{ currentFriend.nickName }}</text>
                    </view>
                    <!--信息-->
                    <view class="popup-info">
                        <uni-forms :modelValue="formData" label-position="top" class="popup-form">
                            <uni-forms-item label="验证信息" name="verifyInfo" class="popup-form-item">
                                <text class="verify-info-text">{{formData.verifyInfo.length}}/50</text>
                                <textarea :maxlength="50" class="verify-info" v-model="formData.verifyInfo" placeholder="请输入验证信息" ></textarea>
                            </uni-forms-item>
                            <uni-forms-item label="备注" name="remark" class="popup-form-item">
                                <text class="verify-info-text">{{formData.remark.length}}/15</text>
                                <input :maxlength="15" class="remark" type="text" v-model="formData.remark" :placeholder="currentFriend.nickName" />
                            </uni-forms-item>
                            <uni-forms-item label="分组" name="group" class="popup-form-item">
                                <uni-data-select
                                    v-model="formData.group"
                                    :localdata="allGroups"
                                    @change="changeGroup"
                                    class="group"
                                ></uni-data-select>
                            </uni-forms-item>
                            <uni-forms-item label="权限设置" name="permission" class="popup-form-item">
                                <view class="permission">
                                    <text>只聊天，不看动态</text>
                                    <switch @change="changePermission" class="permission-switch" color="#0099ff" style="transform:scale(0.8)"/>
                                </view>
                            </uni-forms-item>
                            <!-- 按钮 -->
                            <uni-forms-item>
                                <view class="popup-btn">
                                    <button type="primary" @tap="submitAddFriend">提交</button>
                                </view>
                            </uni-forms-item>
                        </uni-forms>
                    </view>
                    <!--加载更多-->
                    <view class="load-more-container" v-if="loadMoreStatus">
                        <uni-load-more status="loading" class="load-more" />
                    </view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getPossibleContacts } from '../../api/contacts'
import { getCategoryList } from '../../api/category';
import { addContact } from '../../api/contacts';
import searchTopBar from './components/search_top_bar.vue';

const searchText = ref('')
const popupRef = ref(null)
function inputHandler(e) {
    console.log(e.detail.value)

}
//获取头部栏高度
const topBarHeight = ref(0)
const topBarHeightHandler = (height, topStatusHeight) => {
    topBarHeight.value = height + topStatusHeight
}
//点击取消按钮关闭搜索框】
const closeSearch = () => {
    otherWayShow.value = true
    searchText.value = ''
}
// 获取可能认识的新朋友列表
const newFriendsList = ref([])
const getNewFriends = async () => {
    let res = await getPossibleContacts()
    if(res && res.code == 0){
        console.log("获取到可能认识的新朋友列表", res)
        newFriendsList.value = res.result
    }
}

const formData = reactive({
    verifyInfo: '',
    remark: '',
    group: 1,
    permission: false,
    receiveId: '' //接收者id
})
// 添加好友按钮从上面弹出
const currentFriend = ref({})
const toggle = (type, item) => {
    popupRef.value.open(type)
    console.log("打开弹窗", type, item)
    currentFriend.value = item
}
//
//查询所有分组
const allGroups = ref([
    { value: 0, text: "+ 新建分组" }
])
const getAllGroups = async () => {
    //获取所有分组
    console.log("获取所有分组")
    let res = await getCategoryList()
    if(res && res.code == 0){
        console.log("获取到所有分组", res)
        //将分组进行排序后添加到allGroups
        res.result.sort((a, b) => a.sort - b.sort)
        let len = allGroups.value.length
        res.result.map(item => {
            allGroups.value.push({ value: item.sort + len, text: item.categoryName })
        })
    }
}
//切换分组
const changeGroup = (value) => {
    if (value == 0) {
        //新建分组
        //弹出框
        uni.showModal({
            title: '新建分组',
            editable: true,
            placeholderText: '请输入分组名称',
            success: (res) => {
                if (res.confirm) {
                    //判断输入的名称是否存在,获取该名称的value
                    let flag = false
                    allGroups.value.map(item => {
                        if(item.text == res.content){
                            formData.group = item.value
                            flag = true
                            return
                        }
                    })
                    if(flag){
                        return
                    }
                    let len = allGroups.value.length
                    allGroups.value.push({ value: allGroups.value.length, text: res.content })
                    formData.group = len
                } else if (res.cancel) {
                    //取消
                    formData.group = ''
                }
            }
        })
    } else {
        //选择分组
        formData.group = value
    }
}
//切换权限
const changePermission = (value) => {
    formData.permission = value.detail.value
}
//提交添加好友
const loadMoreStatus = ref(false)
const submitAddFriend = async () => {
    loadMoreStatus.value = true
    formData.remark = currentFriend.value.nickName
    formData.receiveId = currentFriend.value.userId
    console.log("提交添加好友", formData)
    let res = await addContact(formData)
    if(res && res.code == 0){
        //删除该朋友
        newFriendsList.value.splice(newFriendsList.value.findIndex(item => item.userId == currentFriend.value.userId), 1)
        currentFriend.value = {}
        //清理表单
        formData.verifyInfo = ''
        formData.remark = ''
        formData.group = 1
        formData.permission = false
        //关闭弹窗
        loadMoreStatus.value = false
        popupRef.value.close()
    }else{
        loadMoreStatus.value = false
        popupRef.value.close()
    }
}
//点击搜索框
const otherWayShow = ref(true)
const inputFocusHandler = () => {
    otherWayShow.value = false
}
onMounted(() => {
    getNewFriends()
    getAllGroups()
})
</script>

<style lang="scss" scoped>
.page-container{
    width: 100%;
    background-color: #f6f6f6;
    height: 100%;
    .container{
    padding: 20rpx;
    height: 100%;
   .search-container{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .search-input{
            width: 100%;
            height: 70rpx;
            border-radius: 10rpx;
            padding-left: 80rpx;
            background-color: #e8e8e8;
            
        }
        .search-icon{
            position: absolute;
            z-index: 1;
            left: 30rpx;
            top: 50%;
            transform: translateY(-50%);
        }
        
   }
   .other-way{
        height: 200rpx;
        //添加过渡效果
        transition: height 1s ease, opacity 1s ease;
        overflow: hidden;
        opacity: 1;
        
   }
   .other-way.hide{
        height: 0;
        opacity: 0;
    }
   .list-container{
        margin-top: 25rpx;
        .list-title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ccc;
            padding-bottom: 15rpx;
            .title{
                font-size: 23rpx;
            }
            .more{
                display: flex;
                align-items: center;
                text-decoration: none;
                color: #333;
                font-size: 16rpx;
                text{
                    padding-right: 5rpx;
                }
            }
        }
        .search-text{
            height: 100rpx;
            background-color: #fff;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .search-text-title{
                width: 90%;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                .search-text-text{
                    color: #58a9fd;
                    
                }
            }
            .search-text-icon{
                margin-left: auto;
                padding-right: 5rpx;
            }
            &:active{
                //背景颜色变暗
                background-color: #f5f5f5;
            }

        }
   }
}
.popup-content{
    height: 100%;
    padding: 20rpx;
    .popup-top{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .popup-avatar{
            width: 90rpx;
            height: 90rpx;
            margin-right: 20rpx;
            border-radius: 50%;
            border: 1px solid #ccc;
        }
    }
    .popup-info{
        margin-top: 20rpx;
        .popup-form{
            .popup-form-item{
                font-size: 15rpx;
                position: relative;
                .verify-info-text{
                    position: absolute;
                    z-index: 1;
                    //右下角
                    right: 10rpx;
                    bottom: 10rpx;
                }
                .verify-info{
                    width: 97%;
                    height: 150rpx;
                    background-color: #e0e0e0;
                    border-radius: 5rpx;
                    padding: 10rpx;
                }
                .remark{
                    height: 50rpx;
                    background-color: #e0e0e0;
                    border-radius: 5rpx;
                    padding: 10rpx;
                }
                .group{
                    height: 50rpx;
                    border-radius: 5rpx;
                }
                .permission{
                    height: 50rpx;
                    background-color: #e0e0e0;
                    border-radius: 5rpx;
                    padding: 10rpx;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    .permission-switch{
                        margin-left: auto;
                    }
                }
            }
        }
    }
    .load-more-container{
        //遮罩层
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
        .load-more{
           color: #fff;
        }
    }
}
}
$nav-height: 30px;
.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
</style>